<template>
  <div class="continer">
  <div class="head">
           <div class="top">
        <h2 class="title">数据指标</h2>
    <div>
            <el-select v-model="value2" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button type="success">导出</el-button>
  <el-button type="primary">全部</el-button>
    </div>
    </div>
  
  </div>
  <div class="bottom">
  <div class="left">
    <div class="price">
        <p>价格平均值</p>
        <p>15￥/kg</p>
        <p><i class="el-icon-caret-top"></i>10% 同比去年</p>
    </div>
    <div class="price">
        <p>预估价格</p>
        <p>15￥/kg</p>
        <p><i class="el-icon-caret-bottom"></i>10% 同比去年</p>
    </div>
  </div>
  <div class="body" style="height:400px; width:100%"></div>
  </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    data(){
        return{
            options: [{
          value: '选项1',
          label: '草莓棚'
        }, {
          value: '选项2',
          label: '西瓜棚'
        }, ],
        value: '选项1',
        value2: '选项1',
        }
    },
    methods:{
        setCard(){
            var myChart = echarts.init(document.getElementsByClassName('body')[0]);
            myChart.setOption({
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },

  },
    xAxis: {
    type: 'category',
    data: ['',2, 4, 6, 8, 10, 12, ],
    name:'月',
    splitLine:{
        show:true,
         lineStyle:{
      type:'dashed'//虚线
  },
    },
    axisLine:{
        lineStyle:{
            type:'dashed',
        }
    },
    axisTick: {
    show: false
},
     


    },

    yAxis: {
    type: 'value',
    name:'元/公斤',
     splitLine :{
        lineStyle:{
      type:'dashed'//虚线
  },
  show: true //隐藏
},
   min: 5,
	max: 29,
	interval: 6
    },
    series: [
    {
    name:'价格走势',
      data: [10,15, 23, 13, 11, 17,28,],
      type: 'line',
      smooth: true,
    showSymbol:false,
    lable:{
         show: true,
         
    }
    },
    
  ],
  legend: {
     itemHeight: 13,
    itemWidth: 13,
    icon:'rect'
  },
})
        }
    },
    mounted(){
        this.setCard()
    }
}
</script>

<style lang="less" scoped>
    .continer{
        margin-bottom: 20px;
        border-radius: 5px;
        border: 1px solid #fff;
    }
    .bottom{
        display: flex;
        background-color: #fff;
        
    }   
    .left{
        padding-top: 66px;
        padding-left: 62px;
    }
    .price{
        margin-bottom: 56px;
        p{
            white-space: nowrap;
            margin-bottom: 20px;
        }
         p:nth-child(1){
            font-size: 14px;
            
        }
         p:nth-child(2){
            font-size: 22px;
            font-weight: 600;
        }
         p:nth-child(3){
            font-size: 12px;
            i{
                color:#1ECBB8;
            }
        }
    }
    .price:nth-child(2){
        .el-icon-caret-bottom{
            color: red;
        }
    }
     .top{
        width: 100%;
        height: 50px;
        background-color: #fff;
        box-sizing: border-box;
        border-bottom: 2px solid #EAF1F7;
        display: flex;
        justify-content: space-between;
        padding: 0 24px;
        align-items: center;
        .el-button--success{
            background-color: #1FCBB8;
            margin-left: 20px;
        }
        .el-select{
        width: 100px;
        
            /deep/.el-input__inner{
            color: #91959B;
            font-weight: 600;
        }
        
    }
     .title{
            font-size: 16px;
            color: #8F9298;
            height: 18px;
            line-height: 18px;
            border-left: 5px solid #526EFE;
            padding-left: 10px;
            font-weight: 700;
        }
        }
</style>